import { Chart } from "@antv/g2";

import { useEffect } from "react";

const radial = () => {
  useEffect(() => {
    const chart = new Chart({
      container: "radial",
      autoFit: true,
      height: 500,
      width: 400,
    });
    chart.options({
      type: "interval",
      autoFit: true,
      data: {
        value: [
          { name: "G", star: 814,color:"#ff7300" },
          { name: "G2", star: 11425,color:"#e1e1e1" },
          { name: "G2Plot", star: 2320 ,color:"#e5e5e5"},
          { name: "S2", star: 968 ,color:"#00ee11"},
          { name: "F2", star: 7346 ,color:"#ff7300"},
          { name: "L7", star: 2888 ,color:"#ff7300"},
          { name: "G6", star: 9314 ,color:"#ff7300"},
          { name: "X6", star: 3985 ,color:"#ff7300"},
          { name: "AVA", star: 1151 ,color:"#ff7300"},
        ],
        // 指定转换器
        transform: [{ type: "sortBy", fields: [["star", true]] }],
      },
      //   设置坐标轴
      // x位置 y位置 colde 颜色 size 大小 不同的标记 用不同的函数
      // color 表示颜色图示 比如这里name字段 值是G 那么就是g的颜色
      encode: { x: "name", y: "star", color: "name", size: 20 },
      scale: { y: { type: "sqrt" } },
      coordinate: { type: "radial", endAngle: 3.141592653589793 },
      style: { radius: 4 },
      animate: { enter: { type: "waveIn", duration: 1000 } },
      axis: { x: { title: "哈哈哈" }, y: false },
      labels: [
        {
          text: "star",
          position: "outside",
          autoRotate: true,
          rotateToAlignArc: true,
          dx: 4,
        },
      ],
      title:{
        title: "这是径向图表",
      }
    });
    chart.render();
  }, []);

  return <div id="radial"></div>;
};

export default radial;
